import React, { useEffect, useRef } from 'react';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
 
const baiduLayer = new TileLayer({
  source: new XYZ({
    url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20141103&scaler=1",
    crossOrigin: "anonymous",
  }),
});


 
const gaodeLayer = new TileLayer({
  source: new XYZ({
    url: "https://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=040&size=1&scale=1&ltype=7",
    crossOrigin: "anonymous",
  }),
});


 
const arcGISLayer = new TileLayer({
  source: new XYZ({
    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
    crossOrigin: "anonymous",
  }),
});




// class MapList extends React.Component {
//   componentDidMount() {
//     const map = new Map({
//       view: new View({
//         center: [0, 0],
//         zoom: 1,
//       }),
//       layers: [
//         new TileLayer({
//           source: new OSM(),
//         }),
//       ],
//       target: 'map',
//     });
//   }

//   render() {
//     return (
//       // 地图的挂载点，可以设置大小，控制地图的大小
//       <div style={{ width: "100%", height: "700px" }} id="map" />
//     );
//   }
// }

interface MapProps {

}

const MapList: React.FC<MapProps> = ({ }) => {
  const mapEle = useRef<HTMLDivElement>(null);
  // const map = useRef<google.maps.Map>();

  useEffect(() => {
    const map = new Map({
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
      layers: [
        arcGISLayer
        // gaodeLayer
        // baiduLayer
        // new TileLayer({
        //   source: new OSM(),
        // }),
      ],
      target: 'map',
    });
  })

  return (
    // <div ref={mapEle} style={{ width: "100%", height: "700px" }} id="map"></div>
    <div ref={mapEle} style={{ width: "340px", height: "480px" }} id="map"></div>
  );

}
export default MapList;
